import React, { useEffect, useState } from 'react';

import classes from './Mask.module.less';
import classNames from 'classnames';

interface MaskProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
  children: React.ReactNode;
  active?: boolean;
  opacity?: boolean;
  callBackEvent?: () => void;
}
{
}
export const NMask = React.memo(
  ({ className, children, active, opacity = false, callBackEvent, ...restProps }: MaskProps) => {
    const [visible, ToggleVisible] = useState<boolean | undefined>(false);
    useEffect(() => {
      ToggleVisible(active);
      document.body.style.overflowY = active ? 'hidden' : 'auto';
      document.body.style.position = active ? 'relative' : 'static';
    }, [active]);
    {
      return (
        <div
          className={classNames(
            classes['mask'],
            'flex items-center justify-center',
            {
              [classes['active']]: visible,
              [classes['bg-grey']]: visible && !opacity,
            },
            className,
          )}
          onClick={() => {
            callBackEvent?.();
          }}
          {...restProps}
        >
          {children}
        </div>
      );
    }
  },
);
